import React, {useEffect} from 'react';
import {Typography} from "@material-ui/core";
import {makeStyles} from "@material-ui/styles";
import {Link} from "react-router-dom";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Avatar from "@material-ui/core/Avatar";
import Paper from "@material-ui/core/Paper";
import Container from "@material-ui/core/Container";
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import {useDispatch} from "react-redux";
import {userLogin} from "../../../../redux/reducers/userLogin";
import {scrollToTop} from "../../../../assets/functions/functions";

const useStyles = makeStyles(theme => ({
  gridContainer: {
    marginBottom: '1.5rem',
  },
  typographyHeader: {
    // Set the marginTop to 14 when there is a back button
    // <Button startIcon={<ArrowBackIcon />}>Back</Button>
    marginTop: 50,
    marginBottom: '2rem'
  },
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    // backgroundColor: '#fff',
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: `${theme.spacing(4)}px ${theme.spacing(4)}px ${theme.spacing(4)}px ${theme.spacing(4)}px`,
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.primary.light,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}))

function Login() {
  const classes = useStyles();

  const [formFields, setFormFields] = React.useState({
    email: '',
    password: ''
  });

  useEffect(() => {
    scrollToTop();
  })

  // const login = useSelector((state) => state.login.isLoggedIn);
  const dispatch = useDispatch();

  const handleLogin = (e) => {
    e.preventDefault()
    dispatch(userLogin(formFields));
  }

  const handleFormFields = (event) => {
    const {name, value} = event.target;

    setFormFields(() => ({
      ...formFields,
      [name]: value,
    }));
  }

  return (
    <>
      <Container component="main" maxWidth="xs">
        <Paper className={classes.paper} elevation={10}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon/>
          </Avatar>
          <Typography component="h1" variant="h5" color={"primary"}>
            Sign in
          </Typography>
          <form className={classes.form} noValidate onSubmit={handleLogin}>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email"
              name="email"
              autoComplete="email"
              autoFocus
              onChange={handleFormFields}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
              onChange={handleFormFields}
            />

            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Sign In
            </Button>
            <Grid container>
              {/* <Grid item xs>
                            <Link href="#" variant="body2">
                                Forgot password?
                            </Link>
                        </Grid> */}
              <Grid item>
                <Link to="/signup">
                  Don't have an account? Sign Up
                </Link>
              </Grid>
            </Grid>
          </form>
        </Paper>

      </Container>
    </>
  )
}

export default Login;